// 1.按下回车将数据存放在本地存储当中 
// 2.再从本地存储中提取数据放在页面当中
$(function () {
    // 为了刷新页面就显示数据 需要页面一刷新就加载一次
    // bug- 因为是追加的li 所以再写再添加会重复显示两遍 所以需要在每次追加数据前 清除所有的li
    // 如果不写清除元素 执行顺序是 1.页面加载执行一次load函数 打印一次里面的li。 2. 再按enter键追加数据 将新的追加到local 保存到本地存储 再从load取出来 再在页面上打印一遍新的todolist 每次都会打印 2n+1 条数据
    load();
    // 1.按下回车 把数据完整的存到本地存储中
    // 存储格式 var todolist = [{title: "xxx", done: false}, {title: "xxx", done: false}]
    $("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            if ($(this).val() === "" || $(this).val() === " ") { // 用户不能输入空值
                alert("请输入待办事项");
            } else {
                var local = getData();
                // console.log(local);
                // 按下回车储存数据到本地储存
                local.push({ title: $(this).val(), done: false }); //追加一个对象
                //用传参的方法再把新的local 存储给本地存储
                saveData(local);
                // 将取过来的数据进行绚烂 放在页面上面 写一个加载的函数
                load();
            }
            $(this).val(""); //清空用户输入的事件
        }
    });

    // 3.写点击a删除数据的功能
    // (1).只有亲儿子才有index()方法 自动加上索引号的方法 需要在生成li的时候加上一个自定义属性 id
    $("ol, ul").on("click", "a", function () {
        // 先获取本地数据
        var data = getData();

        // 修改数据
        var index = $(this).attr("id");
        console.log(index);
        // 保存数据到本地存储 
        // (我们无法直接指定修改本地存储的数据, 但是我们可以将获取过来的修改data,再将data重新存储给本地存储的todolist 也就是替换他)
        // data是数组 使用splice(删除的起始位置, 删除几个)
        data.splice(index, 1);
        saveData(data);
        // 重新绚烂页面
        load();
    });
    // 4.写将数据放在哪里的功能 (正在进行 已经完成)
    // 我们是根据数组中的每个对象里的done属性来决定的, 当我们给checkbox打上勾 就将done改为true 反之改为false 
    // (1) 先找出我们点击了哪个checkbox 我们可以通过 我们之前给a设置的id来获取 
    // (2) 获取后再根据索引号
    $("ol, ul").on("click", "input", function () { // ol ul里面的input都是要添加点击事件的 我忘记了
        // 获取数据 第一步永远是获取数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        data[index].done = $(this).prop("checked");
        console.log(data[index]);
        // 保存到本地存储 (重新覆盖)
        saveData(data);
        // 重新绚烂
        load();
        // 在load渲染页面时 判断是放在哪个位置 通过对象的 done属性的值决定
    });

    // 2.读取本地数据 
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // 本地存储是字符形式存储的
            return JSON.parse(data);
        } else {
            return [];
        }
    };

    // 保存本地储存数据
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    //加载的函数
    function load() {
        var data = getData();
        var todoCount = 0; //正在进行的个数
        var doneCount = 0; //已经完成的个数
        console.log(data);
        $("ol, ul").empty(); // 记得也要把 ul里面的也要清除再重写
        // 用each循环数据
        $.each(data, function (i, ele) { //有几条数据就打印多少个li
            if (ele.done) {
                // 放在 已完成的区域需要把 checked 改为 true 就是打上对勾
                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + ele.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox'><p>" + ele.title + "</p> <a href='javascript:;' id=" + i + "></a></li>");
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    };

    // 写清除所有的本地存储的功能
    $("#clear").on("click", function(){
        localStorage.clear();
        load();
    });
})